<include file="public@header"/>
<style>
.table-cont{
  max-height: 300px;
  overflow: auto;
}
</style>
</head>
<body>
<div class="wrap js-check-wrap">
    <form class="well form-inline margin-top-20" method="post" action="{:url('Student/find_student')}" id="keyword">
        年级:
        <select class="form-control" name="deg" id="deg">
            <option value=''>全部</option>
            <option value='1'>一年级</option>
            <option value='2'>二年级</option>
            <option value='3'>三年级</option>
            <option value='4'>四年级</option>
            <option value='5'>五年级</option>
            <option value='6'>六年级</option>
            <option value='7'>初一</option>
            <option value='8'>初二</option>
            <option value='9'>初三</option>
            <option value='10'>高一</option>
            <option value='11'>高二</option>
            <option value='12'>高三</option>
        </select> &nbsp;&nbsp;
        
        姓名:
        <input type="text" id="name" class="form-control" data-provide="typeahead" autocomplete="off" name="name" value="{$param['name']|default=''}" placeholder="请输入姓名...">
		&nbsp;&nbsp;	   
	    联系方式:
        <input type="text" id="phone" class="form-control" data-provide="typeahead" autocomplete="off" name="phone" value="{$param['phone']|default=''}" placeholder="请输入手机...">
        &nbsp;&nbsp;&nbsp;&nbsp;
		<input type="submit" class="btn btn-primary" value="搜索"/>
        <input class="btn btn-danger" type="button" value="重置" onclick="reset_input();"></input>
		<a class="btn btn-success" href="#" id="add_student" style="float:right">快速添加学生</a>
    </form>
	<if condition="isset($student_info)||isset($hold_student)">
	<form class="js-ajax-form" action="#" method="post">
        <div class="table-actions">
            <input id="edit_student" class="btn btn-primary" type="button" value="修改资料"></input>
            <input id="hold_student" class="btn btn-primary" type="button" value="保持选择"></input>
            <input id="enroll" class="btn btn-primary" type="button" value="报名" onclick="doSelectCategory();" ></input>
			<!-- <button class="btn btn-primary js-ajax-submit" type="submit" data-action="#" data-subcheck="true" disabled="disabled">报名</button> -->
            
            <button id="delete_student" class="btn btn-danger js-ajax-submit" type="submit" style="float:right"
                    data-action="{:url('Student/delete_student')}" data-msg="您确定删除吗？">删除
            </button>
        </div>
		<div class="table-cont" id='table-cont'>
        <table class="table table-hover table-bordered table-list" style="height:80%">
            <thead class="fixed-thead" id="head">
            <tr class='staytop' style="background-color:white">
                <th>
                    <label>
                        <input type="checkbox" class="js-check-all" data-direction="x" data-checklist="js-check-x">
                    </label>
                </th>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年级</th>
                <th>生日</th>
                <th>联系方式</th>
                <th>备用联系方式</th>
                <th>备注</th>
                <th>登记时间</th>
                <th>登记人</th>
                <th>洋葱码</th>
            </tr>
            </thead>
			<if condition="isset($hold_student)">
			<tbody class="scroll-tbody" id="body">
				<foreach name="hold_student" item="vo" key="i">
					<tr name='{$vo.id}' class="success">
						<th scope="row">
							<input type="checkbox" class="js-check" data-yid="js-check-y" data-xid="js-check-x" name="ids[]" checked="checked"
								   value="{$vo.id}" title="ID:{$vo.id}">
						</th>
						<td><b>{$vo.id}</b></td>
						<td>
							{$vo.name}
						</td>
						<td>{$vo.sex==1 ? '男' : ($vo.sex==2 ? '女' : '未知')}
						</td>
						<td>
							
							<switch name="1+date('Y')-$hold_student[$i]['deg']">
								<case value="1">一年级</case>
								<case value="2">二年级</case>
								<case value="3">三年级</case>
								<case value="4">四年级</case>
								<case value="5">五年级</case>
								<case value="6">六年级</case>
								<case value="7">初一</case>
								<case value="8">初二</case>
								<case value="9">初三</case>
								<case value="10">高一</case>
								<case value="11">高二</case>
								<case value="12">高三</case>
								<default />未知
							</switch>
						</td>
						<td>{$vo.birthday|default='未知'}</td>
						<td>
							{$vo.phone}
						</td>
						<td>
							{$vo.phone2|default='无'}
						</td>
						
						<td>
							{$vo.note|default='未知'}
						</td>
						<td>{:date('Y-m-h h:i:s',$vo.buildtime)}</td>
						<td>{$vo.buildid}</td>
						<td>{$vo.onion|default='未知'}</td>
					</tr>
				</foreach>
			</if>
			<if condition="isset($student_info)">
            <foreach name="student_info" item="vo" key="i">
                <tr name='{$vo.id}'>
                    <th scope="row">
                        <input type="checkbox" class="js-check" data-yid="js-check-y" data-xid="js-check-x" name="ids[]"
                               value="{$vo.id}" title="ID:{$vo.id}">
                    </th>
                    <td><b>{$vo.id}</b></td>
                    <td>
                        {$vo.name}
					</td>
                    <td>{$vo.sex==1 ? '男' : ($vo.sex==2 ? '女' : '未知')}
                    </td>
                    <td>
						
						<switch name="1+date('Y')-$student_info[$i]['deg']">
							<case value="1">一年级</case>
							<case value="2">二年级</case>
							<case value="3">三年级</case>
							<case value="4">四年级</case>
							<case value="5">五年级</case>
							<case value="6">六年级</case>
							<case value="7">初一</case>
							<case value="8">初二</case>
							<case value="9">初三</case>
							<case value="10">高一</case>
							<case value="11">高二</case>
							<case value="12">高三</case>
							<default />未知
						</switch>
					</td>
                    <td>{$vo.birthday|default='未知'}</td>
                    <td>
                        {$vo.phone}
                    </td>
                    <td>
                        {$vo.phone2|default='无'}
                    </td>
                    
                    <td>
                        {$vo.note|default='未知'}
                    </td>
					<td>{:date('Y-m-h h:i:s',$vo.buildtime)}</td>
					<td>{$vo.buildid}</td>
					<td>{$vo.onion|default='未知'}</td>
                </tr>
            </foreach>
			</tbody>
			</if>
        </table>
		</div>
        <ul class="pagination">{$page|default=''}</ul>
		
		<div name="sign_in" hidden="hidden">
			<input style="width:74%;float:left;" class="form-control" type="text" value="" placeholder="请选择班级" onclick="doSelectCategory();" id="js-categories-name-input" readonly="true"/>
			<input class="form-control" type="hidden" value="" name="class_id_post" id="js-categories-id-input"/>
			<!-- <input style="width:12%;float:left;margin-left:1%" class="btn btn-primary form-control" value="确认报名！" type="button" /> -->
			<button style="width:12%;float:left;margin-left:1%" class="btn btn-primary js-ajax-submit" type="submit" data-action="{:url('admin/class/sign_in_post')}">报名</button>
			<input style="width:12%;float:right;" class="btn btn-danger form-control" value="取消！" type="button" onclick="sign_in_hide();" />
		</div>
	</form>
	</if>
</div>
<script src="__STATIC__/js/admin.js"></script>
<script src="__STATIC__/js/bootstrap-typeahead.js"></script>
<script src="__STATIC__/js/jquery.cookie.js"></script>
<script>
	function reset_input(){
		$("#name").val('');
		$("#phone").val('');
		$('#deg').val('');
	}

	function sign_in_hide(){
		$("div[name='sign_in']").hide();
	}

	function doSelectCategory() {
		$("div[name='sign_in']").show();
        var selectedCategoriesId = $('#js-categories-id-input').val();
        openIframeLayer("{:url('Class/select',array('id'=>'1'))}", '请选择班级', {
            area: ['900px', '500px'],
            btn: ['确定', '取消'],
            yes: function (index, layero) {
                //do something

                var iframeWin          = window[layero.find('iframe')[0]['name']];
                var selectedCategories = iframeWin.confirm();
                if (selectedCategories.selectedCategoriesId.length == 0) {
                    layer.msg('请选择分类');
                    return;
                }
                $('#js-categories-id-input').val(selectedCategories.selectedCategoriesId.join(','));
                $('#js-categories-name-input').val(selectedCategories.selectedCategoriesName.join(' '));
                //console.log(layer.getFrameIndex(index));
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        });
    }

	window.onload = function(){
	  var tableCont = document.querySelector('#table-cont')
	  /**
	   * scroll handle
	   * @param {event} e -- scroll event
	   */
	  function scrollHandle (e){
		var scrollTop = this.scrollTop;
		this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
	  }

	  tableCont.addEventListener('scroll',scrollHandle)
	}
	
	$(function(){
		$("#enroll").click(function(){
			$("#js-categories-name-input").focus();
		});
	});

	$(function(){
		$("#edit_student").click(function(){
			var ids = [];
			$("input[name='ids[]']").each(function () {
				if ($(this).is(':checked')) {
					ids.push($(this).val());
				}
			});
			if (ids.length == 1){
				var url = "{:url('Student/edit_student','',false,true)}" + "/id/" + ids;
				<!-- alert(url); -->
				window.location.href = url;
			}
			else{
				alert('请选择一个学生进行编辑');
			}
		});
	});
	
	$(function(){
		$("#hold_student").click(function(){
			var ids = [];
			$("input[name='ids[]']").each(function () {
				if ($(this).is(':checked')) {
					ids.push($(this).val());
				}
			});
			if (ids.length < 21){
				$.cookie('hold_student',ids,{path:'/'});
				var url = "{:url('Student/index')}";
				window.location.href = url;
			}
			else{
				alert('一次最多操作20名学生');
			}
		});
	});

	$(function(){
		$("#add_student").click(function(){
			var url = "{:url('Student/add_student','',false,true)}";
			if($("#name").val()){
				url = url + "/name/" + $("#name").val();
			}
			if($("#phone").val()){
				url = url + "/phone/" + $("#phone").val();
			}
			window.location.href = url;
		});
	});

	$(function(){
		$("tr[name]").click(function(){
			var id = $(this).attr("name");
			var is_check = $("input[value='"+id+"']").prop("checked");
			if(is_check){
				$("input[value='"+id+"']").prop("checked",false);
				$(this).prop("class",false);
			}
			else{
				$("input[value='"+id+"']").prop("checked",true);
				$(this).prop("class","success");
			}
		});
	});
	
	$(function(){
		if({$param['deg']|default='-1'}!='-1'){
			var deg = {$param['deg']|default='-1'};
			$("option[value='"+deg+"']").prop("selected","selected");
		}
	});
	
	$(function(){
		$('#name').typeahead({
			source: function (query, process) {
				return $.ajax({
					url: "{:url('Student/find_student_name','',false,true)}",
					type: 'post',
					data: {'name': query},
					success: function (result) {
						var obj = $.parseJSON(result);
						var resultList = [];
						$.each(obj,function(i,n){
							resultList[i] = JSON.stringify(n);
						});
						return process(resultList);
					},
				});
			},
			highlighter: function (obj) {
				var item = JSON.parse(obj);
				var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
				return item.name.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
					return '<strong>' + match + '</strong>'
				}) + item.phone;
			},
			updater: function (obj) {
				var item = JSON.parse(obj);
				$('#phone').val(item.phone);
				$('#name').val(item.name);
				$("option").prop("selected",false);
				$("#keyword").submit();
				return item.name;
			},
			items: 5, //显示5条
			delay: 500, //延迟时间
		});
	});
	
	$(function(){
		$('#phone').typeahead({
			source: function (query, process) {
				return $.ajax({
					url: "{:url('Student/find_student_phone','',false,true)}",
					type: 'post',
					data: {'phone': query},
					success: function (result) {
						var obj = $.parseJSON(result);
						var resultList = [];
						$.each(obj,function(i,n){
							resultList[i] = JSON.stringify(n);
						});
						return process(resultList);
					},
				});
			},
			highlighter: function (obj) {
				var item = JSON.parse(obj);
				var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
				return item.name.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
					return '<strong>' + match + '</strong>'
				}) + item.phone;
			},
			updater: function (obj) {
				var item = JSON.parse(obj);
				$('#name').val(item.name);
				$('#phone').val(item.phone);
				$("option").prop("selected",false);
				$("#keyword").submit();
				return item.phone;
			},
			items: 5, //显示5条
			delay: 500, //延迟时间
		});
	});
</script>
</body>
</html>